<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

        <link rel="stylesheet" href="css/swiper-bundle.min.css" type="text/css" />
        <link rel="stylesheet" href="css/animate.css" type="text/css" />
        <link rel="stylesheet" href="css/common.css" type="text/css" />
	</head>
	<body>

        <div class="pop-bg-share" id="popShare">
            <div class="pop-box-share"><img src="images/share.png" alt="" /></div>
        </div>

        <div class="pop-bg">
            <div class="pop-box" id="ruleShow">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
                <div class="pop-box-title">活动规则</div>
                <div class="pop-box-content">
                    <p>活动时间：</p>
                    <p>2021年1月20日—2月26日（农历元宵节）</p>
                    <p>活动规则：</p>
                    <p>❶ 玩家在游戏过程中有机会获得红包道具，领取现金红包，每位唯一用户在活动期间仅能领取一次现金红包。</p>
                    <p>❷ 每人每天可以有三次机会邀请好友复活自己。</p>
                    <p>❸ 玩家可实时查看积分榜、红包记录以及福锁榜排名。（积分榜显示为当前积分前50名的玩家，红包记录显示为实时领取到红包的50位玩家，福锁榜显示为前50名集齐福锁的玩家）。</p>
                    <p>❹ 活动结束后，将在【光明营养知食说】推文中公布获奖者(最好将时间定下)，以及发放奖品事宜。</p>
                    <p>❺ 禁止通过非正规途径，进行刷分等违规行为，一经发现，将取消游戏得分和获奖资格。</p>
                    <p>❻ 活动期间获得的奖品和红包，需要用户于活动期间内在【我的好礼】中自行兑换，若不兑换则视为主动放弃奖品。实物奖品不可退换、转换、转让或折换现金及其他任何权益。</p>
                </div>
            </div>

            <div class="pop-box pop-game-over" id="custom">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
                <div class="pop-box-title">个性分享</div>
                <div class="pop-input-box flex" id="titleShow">
                    <div>标题：</div>
                    <p></p>
                </div>
                <div class="title-show-box"></div>
                <p style="margin-top: .5rem;">点击弹幕，选择你的个性分享标题</p>
                <div class="confirm-share-btn" style="margin-top: .1rem;"></div>
            </div>

            <div class="pop-box" id="gift" style="padding: .27rem .4rem .5rem;">
                <img class="pop-close" src="images/pop_close_icon.png" alt="" />
                <div class="pop-box-title">游戏奖品</div>
                <div class="pop-box-content game-rule-content" style="max-height: 11rem;">
                    <img class="pop-gift-img" src="images/pop_gift_img.png" alt="" />
                </div>
            </div>
        </div>

        <div class="page rank">
            <img class="rank-left-top" src="images/rank_left_top_img.png" alt="" />
            <div class="rank-gift-share-btn"></div>
            <div class="rank-gift-container">
                <div class="rank-gift-box">
                    <div class="rank-box-nav flex">
                        <div class="rank-box-nav-item onthis">积分榜</div>
                        <div class="rank-box-nav-item">福锁榜</div>
                        <div class="rank-box-nav-item">红包记录</div>
                    </div>
                    <div class="rank-box-content redbag show" id="score">
                        <div class="rank-box-content-title flex">
                            <div class="rank-box-content-title-item">名次</div>
                            <div class="rank-box-content-title-item">用户昵称</div>
                            <div class="rank-box-content-title-item">积分</div>
                        </div>
                        <div class="rank-box-content-list">
                            <div class="rank-box-content-list-item first">
                                <div class="rank-box-content-list-rank">32</div>
                                <div class="rank-box-content-list-name">我的昵称我的昵称我的昵称我的昵称我的昵称</div>
                                <div class="rank-box-content-list-score">68720</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank"><img src="images/rank_first_icon.png" alt="" /></div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank"><img src="images/rank_secend_icon.png" alt="" /></div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank"><img src="images/rank_third_icon.png" alt="" /></div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">4</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">5</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">6</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">7</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">8</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">9</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">10</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">11</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">12</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">13</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">14</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">15</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">180056</div>
                            </div>
                        </div>
                        <div class="rank-banner-box">
                            <img src="images/rank_banner_img.png" alt="" />
                            <img class="icon animated pulse infinite slow" src="images/rank_banner_img_icon.png" alt="" />
                        </div>
                    </div>
                    <div class="rank-box-content redbag" id="lock">
                        <div class="rank-box-content-title flex">
                            <div class="rank-box-content-title-item">名次</div>
                            <div class="rank-box-content-title-item">用户昵称</div>
                            <div class="rank-box-content-title-item">福锁集齐时间</div>
                        </div>
                        <div class="rank-box-content-list">
                            <div class="rank-box-content-list-item first">
                                <div class="rank-box-content-list-rank">168</div>
                                <div class="rank-box-content-list-name">我的昵称我的昵称我的昵称我的昵称我的昵称</div>
                                <div class="rank-box-content-list-score"><span>02.04</span><span>08:10</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank"><img src="images/rank_first_icon.png" alt="" /></div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank"><img src="images/rank_secend_icon.png" alt="" /></div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank"><img src="images/rank_third_icon.png" alt="" /></div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">4</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">5</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">6</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">7</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">8</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">9</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">10</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">11</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">12</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">13</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">14</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-rank">15</div>
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score"><span>01.11</span><span>13:56</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="rank-box-content redbag" id="money">
                        <div class="rank-box-content-title redbag flex">
                            <div class="rank-box-content-title-item">用户昵称</div>
<!--                            <div class="rank-box-content-title-item">红包记录</div>-->
                        </div>
                        <div class="rank-box-content-list redbag">
                            <div class="rank-box-content-list-item first">
                                <div class="rank-box-content-list-name">我的昵称我的昵称我的昵称我的昵称我的昵称</div>
                                <div class="rank-box-content-list-score">获得现金红包</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">获得现金红包</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">获得现金红包</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">获得现金红包</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">获得现金红包</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">获得现金红包</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">获得现金红包</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">获得现金红包</div>
                            </div>
                            <div class="rank-box-content-list-item">
                                <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>
                                <div class="rank-box-content-list-score">获得现金红包</div>
                            </div>
<!--                            <div class="swiper-container">-->
<!--                                <div class="swiper-wrapper">-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                    <div class="swiper-slide">-->
<!--                                        <div class="rank-box-content-list-item">-->
<!--                                            <div class="rank-box-content-list-name">这里是微信昵称这里是微信昵称</div>-->
<!--                                            <div class="rank-box-content-list-score">获得现金红包</div>-->
<!--                                        </div>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="rank-gift-btn-box flex">
                <div class="rule-btn" id="rule"></div>
                <div class="back-btn" id="back"></div>
            </div>
            <img class="rank-gift-left-cow" src="images/rank_gift_left_cow_img.png" alt="" />
            <img class="rank-gift-right-cow" src="images/rank_gift_right_cow_img.png" alt="" />
        </div>

        <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
        <script type="text/javascript" src="js/swiper-bundle.min.js"></script>
        <script type="text/javascript">
            $('.rank-banner-box').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#gift').show();
            })

            // var mySwiper = new Swiper ('.swiper-container', {
            //     direction: 'vertical',
            //     slidesPerView : 'auto',
            //     spaceBetween : 10,
            //     freeMode: true
            //     autoplay: {
            //          delay: 1000,
            //     },
            // })

            $('#popShare').click(function (e) {
                $('#popShare').removeClass('show');
                $('#popShare').find('.pop-box').hide();
            })

            $('.confirm-share-btn').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('#custom').hide();
                $('#popShare').addClass('show');
            });

            $('.rank-gift-share-btn').click(function (e) {
                $('.pop-bg').addClass('show');
                $('#custom').show();
            });

            $('.rank-box-nav-item').click(function (e){
                $('.rank-box-nav-item').removeClass('onthis');
                $(this).addClass('onthis');
                $('.rank-box-content').removeClass('show');
                switch ($(this).index()){
                    case 0:
                        $('#score').addClass('show');
                        break;
                    case 1:
                        $('#lock').addClass('show');
                        break;
                    case 2:
                        $('#money').addClass('show');
                        break;
                }
            });

            $('.pop-close').click(function (e) {
                $('.pop-bg').removeClass('show');
                $('.pop-box').hide();
            });

            $('#back').click(function (e){
                window.location.href = "index.html";
            });

            $('#rule').click(function (e){
                $('.pop-bg').addClass('show');
                $('#ruleShow').show();
            });

            $(document).ready(function (e) {
                addWishItem();
                setInterval(addWishItem, 1200);
            });

            let randomPosition = 0;
            let randomItem = 0;
            let itemArr = ['奔跑吧，牛宝宝！','牛气永固，来跑第一！','有种和我一起来PK！','全民运动，牛年开跑，谁来跑过我！','牛年一起做最有骨力的人！','“牛”转乾坤，就看这把福锁好运了！','一大波现金红包在这里，一起来分！','我就是牛年乘风破浪的仔！','新春好礼，牛气开枪，一起来得高分抢戴森，Bose耳机好礼！','牛来运转，现金好礼犇犇而来！','牛年行好运，光明送好礼！','牛气新年，集福锁召唤好运，还有爱奇艺电视果好礼相送！','牛年跃高分，新年好光明！','新春跑起来，福锁唤好礼，牛年行大运！'];
            let ItemContent = '';
            function wishItemTapFun(obj) {
                console.log(obj.attr('id'));
                //obj.remove();
                $('#titleShow').find('p').html(obj.html());
            }

            function addWishItem() {
                ItemContent = itemArr[Math.floor(Math.random() * itemArr.length)];
                $('.title-show-box').append('<div class="title-show-item position'+ randomPosition +'" id="' + randomItem + '" onclick="wishItemTapFun($(this))">'+ ItemContent +'</div>');
                $('#'+ randomItem).animate({left: '-100%'}, {duration: 15000, easing: 'linear', complete: function () {
                    $(this).remove();
                }})
                randomPosition == 6 ?randomPosition=0:randomPosition++;
                randomItem++;
            }
        </script>
	</body>
</html>
